<!-- 报名页面 首页 -->
<!-- 主题蓝色 #1ea0ff -->
@extends('layouts.apply')
<<<<<<< HEAD

=======
@section('css')
<style>
  /* public */

  /* vue 首屏加载防止闪烁 */
  [v-cloak] {
    display: none;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: rgb(103, 106, 108);
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: rgb(103, 106, 108);
  }
  input::-moz-input-placeholder, textarea::-moz-placeholder {
    color: rgb(103, 106, 108);
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: rgb(103, 106, 108);
  }
  input:disabled {
    background: #e6e6e6;
    opacity: 1;
  }
  input[disabled] {
    background: #e6e6e6;
    opacity: 1;
  }
  .form-group-mar-l {
    margin-bottom: 20px!important;
  }
  .form-group-title {
    width: 92%;
    text-align: left;
    margin: 0 0 8px 5%;
  }
  .label-high-input {
    vertical-align: top;
  }
  .label-wide {
    width: 80%;
    text-align: left;
    margin-bottom: 20px;
  }
  .textarea-normal {
    -webkit-appearance: none!important;
    width: 60%;
    border: none;
    border-radius: 8px;
    background: #e6e6e6;
    padding: 8px 8px;
    resize: none;
    color: #000;
  }
  .textarea-large {
    -webkit-appearance: none!important;
    width: 80%;
    border: none;
    border-radius: 8px;
    background: #e6e6e6;
    padding: 8px 8px;
    resize: none;
    color: #000;
  }
  .add-item-btn {
    max-width: 600px;
    width: 86%;
    background: #fff;
    border: 2px solid #1ea0ff;
    height: 40px;
    border-radius: 8px;
    color: #1ea0ff;
    font-size: 18px;
    line-height: 36px;
    cursor: pointer;
    display: inline-block;
  }
  .delete-btn {
    margin-top: 10px;
    color: #ff1e1e;
    border-color: #ff1e1e;
  }
  .input-tips-normal {
    width: 60%;
    text-align: left;
    line-height: 24px;
    left: 34%;
    font-size: 12px;
    position: relative;
    top: -16px;
  }
  .input-tips-large {
    width: 80%;
    text-align: left;
    line-height: 24px;
    font-size: 12px;
    margin: 0 auto;
    text-indent:2em;
  }
  .apply-modal-bg {
    width: 200%;
    height: 400%;
    position: absolute;
    left: -50%;
    top: -50%;
    background: rgba(0,0,0,0.5);
  }
  .apply-modal {
    width: 270px;
    min-height: 110px;
    position: fixed;
    top: 50vh;
    left: 50%;
    transform: translate(-135px, -25vh);
    overflow: hidden;
    z-index: 1000;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);
  }
  .apply-modal-info {
    padding: 26px;
  }
  .apply-modal-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #ddd;
  }
  .star-wrap {

  }
  .star-wrap .rating-container .empty-stars {
    color: #1ea0ff;
  }
  .star-error {

  }
  .star-wrap .rating-container .filled-stars {
    color: #1ea0ff;
    -webkit-text-stroke: transparent;
    text-shadow: none;
  }
  .star-wrap .clear-rating, .star-wrap .caption {
    display: none;
  }
  .rating-container .rating-input {
    display: none;
  }


  /* 报名页面 1 */
  label {
    vertical-align: bottom;
    line-height: 30px;
    margin-bottom: 0; 
    width: 22%;
    text-align: left;
  }
  @media screen and (max-width:321px) {
    label {
      width: 24%;
    }
  }
  label > .label-number {
    width: 28px;
    display: inline-block;
  }
  .input-radio-margin-l {
    margin-right: 18%;
  }
  .input-radio-margin-s {
    margin-right: 4%;
  }
  .input-radio-wbg {
    position: relative;
    top: -26px;
    left: 54%;
    width: 200px;
    transform: translateX(-50px);
    text-align: left;
  }
  .input-radio-wrap {
    border: none;
    border-radius: 8px;
    background: #e6e6e6;
    height: 36px;
    width: 60%;
    display: inline-block;
    line-height: 36px;
    text-align: left;
    padding-left: 4%;
  }
  .school-choice-wrap {
    border: none;
    margin-left: 33%;
    width: 60%;
    text-align: center;
    position: absolute;
    background: #fff;
    /* border: 1px solid #e6e6e6; */
    border-radius: 8px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
    transform: translateY(2px);
    line-height: 26px;
    padding: 4px 0;
    max-height: 200px;
    overflow-y: scroll; 
  }
  .school-choice {

  }
  select {
    color: #000;
  }
  select > option {
    color: #000;
  }
  .select-1 {
    border: none;
    border-radius: 8px;
    height: 36px;
    padding: 0 10px;
    width: 60%;
    background:#e6e6e6 url('{{asset('assets/apply/img/listBtn.png')}}') no-repeat 96% center;
  }
  .select-2 {
    border: none;
    border-radius: 8px;
    height: 36px;
    padding: 0 14px;
    width: 29.5%;
    background:#e6e6e6 url('{{asset('assets/apply/img/listBtn.png')}}') no-repeat 90% center;
  }
  .apply-select {
    width: 120px;
    float: left;
    background: #e6e6e6 url('http://www.m-union.net.cn/img/apply/listBtn.png') no-repeat 93% center;
  }
  .apply-check-tips {
    float: right;
    width: 60%;
    margin-right: 6.5%;
    margin-top: 4px;
    font-size: 12px;
    color: red;
  }
  .apply-info-wrap {
    width: 60%;
    display: inline-block;
  }
  .apply-info-btn {
    cursor: pointer;
    border-radius: 20px;
    margin: 5px 0 0 0;
    color: #fff;
    background-color: #1ea0ff;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    max-width: 90px;
    display: inline-block;
    float: right;
    width: 36%;
  }
  .apply-intro-mask {
    position: fixed;
    z-index: 100;
    top: -50%;
    right: 0;
    left: -50%;
    bottom: 0;
    width: 200%;
    height: 200%;
    background: rgba(0,0,0,0.6);
  }
  .apply-intro-container {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-26%);
    width: 90vw;
    height: 86vh;
    background: #1ea0ff;
    z-index: 1000;
    border-radius: 12px;
    border: 3px solid #fff;
  }
  .apply-intro-title {
    font-size: 20px;
    margin-top: 35px;
    margin-bottom: 25px;
    color: #fff;
    font-weight: bold;
  }
  .apply-intro-tab {
    list-style-type: none;
    position: relative;
    width: 32%;
    height: 74%;
    display: inline-block;
    margin: 0;
    padding-left: 4px;
  }
  .apply-intro-tab > li {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    list-style-type: none;
    color: #fff;
    text-align: left;
    padding-left: 12px;
    margin: 12px 0px;
  }
  .apply-intro-tab > li.tab-active {
    color: #1ea0ff;
    background: #fff;
    border-radius: 8px 0 0 8px;
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.2);
  }
  .apply-intro-show {
    float: right;
    position: relative;
    width: 64%;
    height: 74%;
    margin-right: 4%;
    z-index: 10;
    background: #fff;
    box-shadow: 0 0 20px 4px rgba(0,0,0,0.2);
    border-radius: 12px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 10px;
  }
  .apply-intro-show::-webkit-scrollbar {
    display: none;
  }
  .apply-intro-show::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
  }
  .apply-intro-close {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 14px;
    color: #fff;
    text-decoration: underline;
    z-index: 1000;
  }
  .show-title {
    margin-top: 12px;
    font-size: 14px;
    font-weight: bold;
    color: #1ea0ff;
    letter-spacing: 1px;
  }
  .show-subTitle {
    font-size: 12px;
    margin-bottom: 20px;
  }
  .show-content {
    text-align: left;
    line-height: 24px;
  }
  .input-error {
    border: 1px solid red!important;
  }
  .upload-success {
    margin-top: 60px;
    margin-bottom: 20px;
  }
  .upload-success > img {
    width: 11%;
  }
  .upload-success > span {
    margin-left: 2%;
    font-size: 36px;
    font-weight: 400;
    vertical-align: middle;
    color: #1ea0ff;
  }
  .success-info {
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 60px;
  }
  .follow-meilan {
    width: 80%;
    margin: 0 auto 45px;
    height: 40px;
    background: #1ea0ff;
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
    line-height: 40px;
    font-weight: 600;
  }
  .qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .qrcode-modal-mask {
    position: fixed;
    background: rgba(0,0,0,0.6);
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
  }
  .qrcode-content {
    position: relative;
    width: 86%;
    background: #fff;
    margin: 0 auto;
    top: 18vh;
    height: 70%;
    border-radius: 20px;
    border: 3px solid #1ea0ff;
  }
  .qrcode-content > img {
    width: 70%;
    margin-top: 13%;
    margin-bottom: 6%;
  }
  .qrcode-content > div {
    font-size: 16px;
    font-weight: bold;
  }
  #app-4 {
    margin-bottom: -10px;
  }
  /* iphone 报名页面一 适配 */
  @media screen and (max-width:321px) {
    .photo-upload {
      width: 100px!important;
    }
    select#apply {
      width: 100px!important;
    }
  }
  /* 报名页面 2-1 活动策划*/
</style>
@endsection
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
@section('main-content')
<!-- 1 策划, 2 运营, 3 设计, 4 摄影, 5 开发, 6 视频 -->
<!-- 报名页面 1 -->
<div class="main-wrap box-1 animated bounceInUp" id="app-1" style="display:;" v-cloak>
  <div class="progressbar progressbar-1">
    <div href=""></div>
    <div href=""></div>
    <div href=""></div>
    <div href=""></div>
  </div>
  <div class="content-list">
    <form action="">
      <div class="form-group">
        <label for="name"><span class="label-number">1.</span>姓名</label>
        <input type="text" 
              :class="dc==2&&name==''? 'input-error': ''" 
              id="name" 
              v-model="name" 
              placeholder="请输入你的名字">
      </div>
      <div class="form-group" style="height:36px;">
        <label for="sex"><span class="label-number">2.</span>性别</label>
        <div class="input-radio-wrap" :class="dc==2&&sex==0? 'input-error': ''" >
          <input type="radio" name="sex" value="1" v-model="sex"><i></i><span style="margin-right:28%;">男</span>
          <input type="radio" name="sex" value="2" v-model="sex"><i></i><span>女</span>
        </div>
      </div>
      <div class="form-group">
        <label for="province"><span class="label-number">3.</span>省市</label>
          <select class="select-2" v-model="province" id="province" @change="changeProvince()" :class="dc==2&&province==0? 'input-error': ''">
            <option value="0" disabled selected style="display:none;">- 选择省 -</option>
            <option v-for="(item, index) in provinceList" :value="item['id']">${item['name']}</option>
          </select>
          <select class="select-2" v-model="city" id="city" @change="changeCity()" :class="dc==2&&city==0? 'input-error': ''">
            <option value="0" disabled selected style="display:none;">- 选择市 -</option>
            <option v-for="(item, index) in cityList" :value="`${item}`">${item}</option>
          </select>
      </div>
      <div class="form-group">
        <label for="school"><span class="label-number">4.</span>学校</label>
<<<<<<< HEAD
        <input type="text" v-model="school" :class="dc==2&&school==''? 'input-error': ''" @input="inputSchool()" placeholder="请输入学校的全称">
=======
        <input type="text" v-model="school" :class="dc==2&&school==''? 'input-error': ''">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
        <div class="school-choice-wrap" v-show="school.length>0&&schoolListFiltered.length>1&&shoolListFilteredShow==2">
          <option class="school-choice" @click="selectSchool(item['name'])" value="${item['name']}" v-for="(item, index) in schoolListFiltered">${item['name']}</option>
        </div>
        <!-- <select class="select-1" name="" id="school" v-model="school" :class="dc==2&&school==0? 'input-error': ''">
          <option value="0" disabled selected style="display:none;">请选择你的学校</option>
          <option :value="item[2]" v-for="(item, index) in schoolList">${item['name']}</option>
        </select> -->
      </div>
      <div class="form-group">
        <label for="zone"><span class="label-number">5.</span>校区</label>
        <input type="text" :class="dc==2&&zone==''? 'input-error': ''" id="zone" v-model="zone" placeholder="若没有请填“无”">
      </div>
      <div class="form-group">
        <label for="profession"><span class="label-number">6.</span>专业</label>
        <input type="text" :class="dc==2&&profession==''? 'input-error': ''" id="profession" v-model="profession" placeholder="请输入所学专业全称">
      </div>
      <div class="form-group">
        <label for=""><span class="label-number">7.</span>学历</label>
        <select class="select-1" v-model="degree" :class="dc==2&&degree==''? 'input-error': ''" >
          <option value="0" disabled selected style="display:none;">请选择你的学历</option>
          <option value="1">博士生</option>
          <option value="2">硕士生</option>
          <option value="3">本科生</option>
          <option value="4">专科生</option>
        </select>
      </div>
      <div class="form-group">
        <label for=""><span class="label-number">8.</span>学制</label>
        <select class="select-2" v-model="education" :class="dc==2&&education==0? 'input-error': ''" >
          <option value="0" selected disabled style="display:none;">选择学制</option>
          <option :value="index" v-for="(item, index) in eduList">${item}</option>
        </select>
        <select class="select-2" v-model="grade" :class="dc==2&&grade==0? 'input-error': ''" >
          <option value="0" selected disabled style="display:none;">选择年级</option>
          <option :value="index + 1"  v-for="(item, index) in eduYearList[education]">${item}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="phone"><span class="label-number">9.</span>电话</label>
        <input type="number" 
              :class="dc==2&&phone==''? 'input-error': ''" 
              pattern="[0-9]*" 
              id="phone" 
              v-model="phone" 
              placeholder="请输入你的电话">
        <div ref="phoneTips" class="apply-check-tips animated pulse" style="display:none;">请输入正确的电话号码！</div>
      </div>
      <div class="form-group">
        <label for="wechat"><span class="label-number">10.</span>微信</label>
        <input type="text" :class="dc==2&&wechat==''? 'input-error': ''"  id="wechat" v-model="wechat" placeholder="请输入你的微信号">
      </div>
      <div class="form-group">
        <label for="qq"><span class="label-number">11.</span>&nbsp;QQ</label>
        <input type="number" 
              :class="dc==2&&qq==''? 'input-error': ''" 
              pattern="[0-9]*" 
              id="qq" 
              v-model="qq" 
              placeholder="请输入你的QQ">
      </div>
      <div class="form-group">
        <label for="email"><span class="label-number">12.</span>邮箱</label>
        <input type="text" :class="dc==2&&email==''? 'input-error': ''" id="email" v-model="email" placeholder="请输入你的邮箱">
        <div ref="emailTips" class="apply-check-tips animated pulse" style="display:none;">请输入正确的邮箱地址！</div>
      </div>
      <div class="form-group">
        <label for="photo" class="label-high-input" style="transform:translateY(2px);"><span class="label-number" >13.</span>照片</label>
        <div class="upload-wrap">
          <input type="file" id="photo" ref="photoUpload" class="upload-input" @change="addPhoto()">
          <i class="photo-upload" ref="photoPreview" :class="dc==2&&photo==''? 'input-error': ''" ></i>
          <span v-html="uploadText" ref="uploadText" class="upload-btn" @click="uploadBtn"></span>
          <div class="upload-file-name" ref="uploadFileName">${uploadFileName}</div>
          <div class="animated pulse" ref="uploadSuccess" style="width:120px;display:none;">上传成功!</div>
<<<<<<< HEAD
          <div class="animated pulse" ref="uploadError" style="width:120px;display:none;color:red;">图片不能大于5m!</div>
=======
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
        </div>
      </div>
      <div class="form-group">
        <label for="apply" style="transform:translateY(-4px);"><span class="label-number">14.</span>岗位</label>
        <div class="apply-info-wrap">
          <select name="apply" class="select-1 apply-select" id="apply" v-model="applySelected" :class="dc==2&&apply==''? 'input-error': ''" >
            <option value="0" selected disabled style="display:none;">请选择岗位</option>
            <option :value="item['name']" v-for="(item, index) in applyList">${item['name']}</option>
          </select>
          <span class="apply-info-btn"  @click="openApplyModal()">岗位介绍</span>
        </div>
      </div>
    </form>
    <div class="next-step-wrap">
      <button class="next-step-btn" onclick="tobox2()"></button>
    </div>
  </div>
  <div class="apply-intro-wrap" v-show="applyIntro==2">
    <div class="apply-intro-mask" @click="closeApplyModal()"></div>
    <div class="apply-intro-container" ref="applyIntroContainer" id="apply-intro-modal">
      <div class="apply-intro-title">岗 位 介 绍</div>
      <ul class="apply-intro-tab">
        <li v-for="(item, index) in applyList" 
            :class="tabActiveFlag==index+1? 'tab-active': ''" 
            @click="tabActive(item['name'],index)">${item['name']}</li>
      </ul>
      <div class="apply-intro-show" v-if="tabActiveShow==1">
        <div class="show-title">活动策划</div>
        <div class="show-subTitle">MKT Planning</div>
        <div class="show-content">
          Job Description：<br>
          1、参与所在团队的营销活动策划并配合高级活动策划输出方案；<br>
<<<<<<< HEAD
          2、执行团队的各类项目，并及时进行复盘，积累数据及经验，辅助团队其他项目。<br>
          <br>
          Requirements：<br>
          1、大一学生；<br>
          2、脑洞大，擅创意，对新鲜事物有好奇心及深度思考；<br>
=======
          2、执行团队的各类项目，并几时进行复盘，积累数据及经验，辅助团队其他项目。<br>
          <br>
          Requirements：<br>
          1、大一学生；<br>
          2、脑洞大，擅创意，对新鲜食物有好奇心及深度思考；<br>
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          3、关注各类品牌营销案例，并有自己的见解；<br>
          4、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==2">
        <div class="show-title">内容运营</div>
        <div class="show-subTitle">Content Operation</div>
        <div class="show-content">
          Job Description：<br>
          1、配合所在团队的项目传播方案并执行；<br>
          2、参与所在团队所有项目的文案策划及输出；<br>
          3、配合高级内容运营监控项目传播数据，对传播进行复盘总结。<br>
          <br>
          Requirements：<br>
          1、大一学生；<br>
          2、各类社交媒体深度用户，熟悉各类社交平台的玩法；<br>
          3、具有基本的传播学知识，广告、新闻、传播等相关专业有加分；<br>
          4、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==3">
        <div class="show-title">设计师</div>
        <div class="show-subTitle">Designer</div>
        <div class="show-content">
          Job Description：<br>
          1、参与所在团队的营销活动策划并配合高级活动策划输出方案；<br>
<<<<<<< HEAD
          2、执行团队的各类项目，并及时进行复盘，积累数据及经验，辅助团队其他项目。<br>
          <br>
          Requirements：<br>
          1、大一学生；<br>
          2、脑洞大，擅创意，对新鲜事物有好奇心及深度思考；<br>
=======
          2、执行团队的各类项目，并几时进行复盘，积累数据及经验，辅助团队其他项目。<br>
          <br>
          Requirements：<br>
          1、大一学生；<br>
          2、脑洞大，擅创意，对新鲜食物有好奇心及深度思考；<br>
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          3、关注各类品牌营销案例，并有自己的见解；<br>
          4、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==4">
        <div class="show-title">摄影师</div>
        <div class="show-subTitle">Photographer</div>
        <div class="show-content">
          Job Description：<br>
          1、参与所在团队活动照片的拍摄及后期；<br>
          2、参与公司在当地官方活动的照片拍摄及后期。<br>
          <br>
          Requirements：<br>
          1、有基本摄影器材，熟悉各类器材的使用；<br>
          2、具备基本的摄影知识，能够独立完成拍摄需求；<br>
          3、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==5">
        <div class="show-title">智库·开发组</div>
        <div class="show-subTitle">Think Tank - Programming Team</div>
        <div class="show-content">
          Job Description：<br>
          1、负责魅联盟全国活动的线上开发；<br>
          2、负责魅蓝校园微信公众号需求功能的开发。<br>
          <br>
          Requirements：<br>
          1、方向一：PHP(或其他后端语言)<br>
          -使用或者了解过PHP或者其他WEB后台开发语言，了解过MVC框架；<br>
          -使用过MySQL。<br>
          <br>
          2、方向二：前端<br>
          -熟练使用HTML、CSS；<br>
          -熟练掌握JavaScript，熟练一个JS框架；<br>
          -了解过一门非前端语言，包括且不限于Python、PHP、Java等；<br>
          -熟练移动端开发、响应式布局。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==6">
        <div class="show-title">智库·视频组</div>
        <div class="show-subTitle">Think Tank - Video Team</div>
        <div class="show-content">
          Job Description：<br>
          1、负责在年度内的活动视频拍摄及剪辑；<br>
          2、完成日常时间节点的创意视频拍摄及剪辑；<br>
          3、配合其他组完成需求视频的拍摄及剪辑。<br>
          <br>
          Requirements：<br>
          1、具有一定的剧本创作及影视策划创意；<br>
          2、对摄影摄像有浓厚的兴趣，踏实肯干，能够操作一定的单反等设备；有单反或无人机等相关设备者优先；<br>
          3、对影视后期有浓厚的兴趣，课余时间灵活，对蒙太奇有一定的理解和把握；能够运用后期制作软件者优先；<br>
          4、影视传媒类相关专业者优先。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==7">
        <div class="show-title">高级活动策划</div>
        <div class="show-subTitle">Senior MKT Planning</div>
        <div class="show-content">
          Job Description：<br>
          1、负责所在团队的营销活动策划并输出方案；<br>
          2、整合所在团队内外部资源，优化项目资源配置，达到效果最大化；<br>
          3、执行各类项目，并及时进行复盘，积累数据及经验，辅助团队其他项目；<br>
          4、负责指导团队内的活动策划成员（大一）。<br>
          <br>
          Requirements：<br>
          1、大二学生；<br>
<<<<<<< HEAD
          2、脑洞大，擅创意，对新鲜事物有好奇心及深度思考；<br>
=======
          2、脑洞大，擅创意，对新鲜食物有好奇心及深度思考；<br>
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          3、关注各类品牌营销案例，并有自己的见解；<br>
          4、逻辑思维强，有基本的市场分析及用户分析意识；<br>
          5、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==8">
        <div class="show-title">高级内容运营</div>
        <div class="show-subTitle">Senior Content Operation</div>
        <div class="show-content">
          Job Description：<br>
          1、负责制定所在团队的项目传播方案并执行；<br>
          2、负责所在团队所有项目的文案策划及输出；<br>
          3、负责监控项目传播数据，对传播进行复盘总结；<br>
          4、负责指导团队内的内容运营成员（大一）。<br>
          <br>
          Requirements：<br>
          1、大二学生；<br>
          2、各类社交媒体深度用户，熟悉各类社交平台的玩法；<br>
          3、热衷于研究成功的社交传播案例并有自己的思考；<br>
          4、具有基本的传播学知识，广告、新闻、传播等相关专业有加分；<br>
          5、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==9">
        <div class="show-title">高级设计师</div>
        <div class="show-subTitle">Senior Designer</div>
        <div class="show-content">
          Job Description：<br>
          1、负责所在团队的平面视觉设计需求；<br>
          2、负责制定所在团队视觉输出的标准；<br>
          3、负责审核所在团队的视觉输出。<br>
          <br>
          Requirements：<br>
          1、大二学生；<br>
          2、熟练掌握PS、AI等设计软件；<br>
          3、有独特审美，对视觉敏感，有基本的创作能力；<br>
          4、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==10">
        <div class="show-title">高级摄影师</div>
        <div class="show-subTitle">Senior Photographer</div>
        <div class="show-content">
          Job Description：<br>
          1、负责所在团队活动照片的拍摄及后期；<br>
          2、负责公司在当地官方活动的照片拍摄及后期；<br>
          3、负责所在团队宣传图片的拍摄及后期。<br>
          <br>
          Requirements：<br>
          1、有基本摄影器材，熟悉各类器材的使用；<br>
          2、具备良好的摄影知识，能够独立完成拍摄需求；<br>
          3、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==11">
        <div class="show-title">智库·策划组</div>
        <div class="show-subTitle">Think Tank - Programming Team</div>
        <div class="show-content">
          Job Description：<br>
          1、负责全国校园的营销活动策划并输出方案；<br>
          2、负责各区域活动策划方案的审核；<br>
          3、执行各类项目，并及时进行复盘，积累数据及经验；<br>
          4、负责知道全国团队的活动策划。<br>
          <br>
          Requirements：<br>
          1、大三以上学生；<br>
          2、脑洞大，擅创意，对新鲜事务及社会热点有深度思考；<br>
          3、关注各类品牌营销案例，并有自己的见解；<br>
          4、逻辑思维强，有基本的市场分析及用户分析意识；<br>
          5、学习能力强，团队写作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==12">
        <div class="show-title">智库·运营组</div>
        <div class="show-subTitle">Think Tank - Operation Team</div>
        <div class="show-content">
          Job Description：<br>
          1、负责制定全国项目传播方案并执行；<br>
          2、负责魅联盟微信公众号的文案策划及输出；<br>
          3、负责监控项目传播数据，对传播进行复盘总结；<br>
          4、负责指导全国区域微信运营。<br>
          <br>
          Requirements：<br>
          1、大三及以上学生；<br>
          2、各类社交媒体深度用户，熟悉各类社交平台的玩法；<br>
          3、热衷于研究成功的社交传播案例并有自己的思考；<br>
          4、具有基本的传播学知识，广告、新闻、传播等相关专业有加分；<br>
          5、有过微信公众号的运营及策划有加分；<br>
          5、学习能力强，团队协作能力强，有服务意识。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==13">
        <div class="show-title">智库·设计组</div>
        <div class="show-subTitle">Think Tank - Design Team</div>
        <div class="show-content">
          Job Description：<br>
          1、负责全国活动的平面视觉设计；<br>
          2、负责魅联盟各类开发、活动的UI设计；<br>
          3、负责制定魅联盟内部设计规范并审核全国团队的视觉输出；<br>
          4、负责指导各区域设计。<br>
          <br>
          Requirements：<br>
          1、大三学生及以上学生；<br>
          2、熟练掌握PS、AI等设计软件；<br>
          3、设计专业或有一定手绘能力者优先；<br>
          4、有独特审美，对视觉敏感，有较强的创作能力；<br>
          5、自学能力强，课余时间充足，且要有一定的审美能力。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-show" v-if="tabActiveShow==14">
        <div class="show-title">智库·摄影组</div>
        <div class="show-subTitle">Think Tank - Photography Team</div>
        <div class="show-content">
          Job Description：<br>
          1、负责全国活动照片的拍摄及后期；<br>
          2、负责制定官方活动的照片拍摄需求；<br>
          3、负责统筹并拍摄魅联盟内部宣传图片；<br>
          4、负责指导各区域摄影。<br>
          <br>
          Requirements：<br>
          1、大三学生及以上学生；<br>
          2、熟练掌握PS、AI等设计软件；<br>
          3、设计专业或有一定手绘能力者优先；<br>
          4、有独特审美，对视觉敏感，有较强的创作能力；<br>
          5、自学能力强，课余时间充足，且要有一定的审美能力。<br>
          <br>
          <br>
        </div>
      </div>
      <div class="apply-intro-close" @click="closeApplyModal()">关 闭</div>
    </div>
  </div>
</div>
<!-- 报名页面 2-1 策划 -->
<div class="main-wrap box-2-1 animated bounceInUp" id="app-2-1" style="display:none;">
  <div class="progressbar progressbar-2">
    <div onclick="backtobox1(2,1)"></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="content-list">
    <form action="">
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">1. 是否有活动策划经历？</label>
        <div>
<<<<<<< HEAD
          <input v-model="actExp" value="1" type="radio" name="act-exp">
          <i :class="dc==2&&actExp==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input v-model="actExp" value="2" type="radio" name="act-exp">
=======
          <input @change="addDataOnce(actExpDetail, 'addActExp')" v-model="actExp" value="1" type="radio" name="act-exp">
          <i :class="dc==2&&actExp==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input @change="deleteDataAll(actExpDetail)" v-model="actExp" value="2" type="radio" name="act-exp">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&actExp==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in actExpDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">活动名称</label>
          <input :class="dc==2&&item['actName']==''? 'input-error': ''" type="text" placeholder="请输入你的活动名称" v-model="item['actName']">
        </div>
        <div class="form-group-inner">
          <label for="">活动类别</label>
          <input :class="dc==2&&item['actKind']==''? 'input-error': ''" type="text" placeholder="请输入活动类别" v-model="item['actKind']">
        </div>
        <div class="form-group-inner">
          <label for="">所任职务</label>
          <input :class="dc==2&&item['actPosition']==''? 'input-error': ''" type="text" placeholder="请输入你的所任职务" v-model="item['actPosition']">
        </div>
        <div class="form-group">
          <label for="" class="label-high-input">参与事项</label>
          <textarea :class="dc==2&&item['actDone']==''? 'input-error': ''" class="textarea-normal" name="" id="" cols="30" rows="6" placeholder="请输入你参与的事项" v-model="item['actDone']"></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addActExp()" v-if="actExpDetail.length>=1">增加策划经历</div>
        <div class="add-item-btn delete-btn" @click="deleteActExp()" v-if="actExpDetail.length>=2">删除策划经历</div>
      </div>
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">2. 是否能熟练使用PPT等相关软件？</label>
        <div>
          <span>
<<<<<<< HEAD
            <input type="radio" value="1" name="softwareUse" v-model="softwareUse">
=======
            <input type="radio" value="1" name="softwareUse" v-model="softwareUse" @change="addDataOnce(softwareDetail, 'addSoftware')">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
            <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i>
            <span class="input-radio-margin-l">是</span>
          </span>
          <span>
<<<<<<< HEAD
            <input type="radio" value="2" name="softwareUse" v-model="softwareUse">
=======
            <input type="radio" value="2" name="softwareUse" v-model="softwareUse" @change="deleteDataAll(softwareDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
            <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i>
            <span>否</span>
          </span>
        </div>
      </div>
      <div class="form-group form-group-mar-l animated bounceIn" v-for="(item, index) in softwareDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">软件名称</label>
          <input :class="dc==2&&item['softwareName']==''? 'input-error': ''" type="text" v-model="item['softwareName']" placeholder="请输入软件名称">
        </div>
        <div class="form-group form-group-mar-l">
          <label for="">熟练程度</label>
          <input :class="dc==2&&item['softwareSkill']==0? 'input-error': ''"  type="text" disabled="disabled">
<<<<<<< HEAD
          <div class="input-radio-wbg">
            <input type="radio" v-model="item['softwareSkill']" value="1" :name="'softwareSkill'+ index"><i></i><span class="input-radio-margin-s">了解</span>
            <input type="radio" v-model="item['softwareSkill']" value="2" :name="'softwareSkill'+ index"><i></i><span class="input-radio-margin-s">掌握</span>
            <input type="radio" v-model="item['softwareSkill']" value="3" :name="'softwareSkill'+ index"><i></i><span>精通</span>
=======
          <div class="input-radio-wbg" v-model="item['softwareSkill']">
            <input type="radio" value="1" name="softwareSkill"><i></i><span class="input-radio-margin-s">了解</span>
            <input type="radio" value="2" name="softwareSkill"><i></i><span class="input-radio-margin-s">掌握</span>
            <input type="radio" value="3" name="softwareSkill"><i></i><span>精通</span>
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          </div>
          <div class="input-tips-normal" v-if="index==0">
          了解：对软件极其基本功能有初步的了解，会使用一些基本的操作<br>
          掌握：熟练使用软件的各个功能，会做一些简单的设计及图片处理<br>
          精通：完全独立的制作优质的平面设计，会一些高难度的图像处理<br>
          </div>
        </div>
      </div>
      <div class="form-group" style="margin-top:-10px;">
        <div class="add-item-btn animated bounceIn" @click="addSoftware()" v-if="softwareDetail.length>=1">增加使用软件</div>
        <div class="add-item-btn delete-btn" @click="deleteSoftware()" v-if="softwareDetail.length>=2">删除使用软件</div>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">3. 加入的理由</label>
        <textarea :class="dc==2&&joinReason==''? 'input-error': ''" class="textarea-large" v-model="joinReason" name="" id="" cols="30" rows="6" placeholder="请输入加入的理由"></textarea>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">4. 其他补充信息</label>
        <textarea :class="dc==2&&otherInfo==''? 'input-error': ''" class="textarea-large" v-model="otherInfo" name="" id="" cols="30" rows="6" placeholder="请输入其他补充信息"></textarea>
      </div>
    </form>
    <div class="next-step-wrap">
      <button class="next-step-btn" onclick="tobox31()"></button>
    </div>
  </div>
</div>
<!-- 报名页面 2-2 运营 -->
<div class="main-wrap box-2-2 animated bounceInUp" id="app-2-2" style="display:none;">
  <div class="progressbar progressbar-2">
    <div onclick="backtobox1(2,2)"></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="content-list">
    <form action="">
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">1. 是否熟悉秀米、简书等文字编辑软件？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="editUse" name="edit-use">
          <i :class="dc==2&&editUse==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="editUse" name="edit-use">
=======
          <input type="radio" value="1" v-model="editUse" name="edit-use" @change="addDataOnce(editDetail, 'addEdit')">
          <i :class="dc==2&&editUse==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="editUse" name="edit-use" @change="deleteDataAll(editDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&editUse==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in editDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">编辑平台</label>
          <input :class="dc==2&&item['editPlatform']==''? 'input-error': ''" type="text" v-model="item['editPlatform']" placeholder="请输入你所使用的编辑平台">
        </div>
        <div class="form-group">
          <label for="">作品链接</label>
          <input :class="dc==2&&item['workLink']==''? 'input-error': ''" type="text" v-model="item['workLink']" placeholder="请输入你的作品链接">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addEdit()" v-if="editDetail.length>=1">增加作品信息</div>
        <div class="add-item-btn delete-btn" @click="deleteEdit()" v-if="editDetail.length>=2">删除作品信息</div>
      </div>
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">2. 是否拥有自己的自媒体号？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="accountOwn" name="accountOwn">
          <i :class="dc==2&&accountOwn==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="accountOwn" name="accountOwn">
=======
          <input type="radio" value="1" v-model="accountOwn" name="accountOwn" @change="addDataOnce(accountDetail, 'addAccount')">
          <i :class="dc==2&&accountOwn==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="accountOwn" name="accountOwn" @change="deleteDataAll(accountDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&accountOwn==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in accountDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">平台名称</label>
          <input :class="dc==2&&item['platformName']==''? 'input-error': ''" type="text" v-model="item['platformName']" placeholder="请输入你自媒体所属平台">
        </div>
        <div class="form-group-inner">
          <label for="">帐号名称</label>
          <input :class="dc==2&&item['accountName']==''? 'input-error': ''" type="text" v-model="item['accountName']" placeholder="请输入你自媒体帐号名称">
        </div>
        <div class="form-group">
          <label for="">作品链接</label>
          <input :class="dc==2&&item['workLink']==''? 'input-error': ''" type="text" v-model="item['workLink']" placeholder="请输入你的作品链接">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" v-if="accountDetail.length>=1" @click="addAccount()">增加自媒体信息</div>
        <div class="add-item-btn delete-btn" @click="deleteAccount()" v-if="accountDetail.length>=2">删除自媒体信息</div>  
      </div> 
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">3. 是否有过运营经历？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="operateExp" name="operate-exp">
          <i :class="dc==2&&operateExp==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="operateExp" name="operate-exp">
=======
          <input type="radio" value="1" v-model="operateExp" name="operate-exp" @change="addDataOnce(operateExpDetail, 'addOperate')">
          <i :class="dc==2&&operateExp==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="operateExp" name="operate-exp" @change="deleteDataAll(operateExpDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&operateExp==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in operateExpDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">运营平台</label>
          <input :class="dc==2&&item['platformName']==''? 'input-error': ''" type="text" v-model="item['platformName']" placeholder="请输入你运营平台">
        </div>
        <div class="form-group-inner">
          <label for="">帐号名称</label>
          <input :class="dc==2&&item['accountName']==''? 'input-error': ''" type="text" v-model="item['accountName']" placeholder="请输入你运营的帐号名称">
        </div>
        <div class="form-group-inner">
          <label for="">运营时间</label>
          <input :class="dc==2&&item['opeateTime']==''? 'input-error': ''" type="text" v-model="item['operateTime']"
          placeholder="请输入你帐号的运营时间">
        </div>
        <div class="form-group">
          <label class="label-high-input" for="">运营心得</label>
          <textarea :class="dc==2&&item['operateLearn']==''? 'input-error': ''" class="textarea-normal" v-model="item['operateLearn']" name="" id="" cols="30" rows="6"  placeholder="请输入你运营帐号的心得"></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addOperate" v-if="operateExpDetail.length>=1">增加运营信息</div>
        <div class="add-item-btn delete-btn" @click="deleteOperate()" v-if="operateExpDetail.length>=2">删除运营信息</div>
      </div>
      <div class="form-group">
        <label for="" class="form-group-title">4. 给自己的原创能力打分？</label>
        <div class="star-wrap">
          <input id="create-score" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="1" data-size="xs">
        </div>
        <div class="input-tips-large">
          能够独立完成一篇推文稿的创作、配图文章的可读性、趣味性、思考性、话题性为四个纬度，没有一个达到自行扣分。
        </div>
      </div>
      <div class="form-group">
        <label for="" class="form-group-title">5. 给自己的排版能力打分？</label>
        <div class="star-wrap">
          <input id="typeset-score" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="1" data-size="xs">
        </div>
        <div class="input-tips-large">
          美观性、统一性、简洁性、排版速度、按要求排版五个纬度，有一个没有达到自行扣分。
        </div>
      </div>
      <div class="form-group">
        <label for="" class="form-group-title">6. 加分技能</label>
        <div>
          <input type="checkbox"value="会p图" v-model="scoreUpSkill" name="score-up-skill">
          <i :class="dc==2&&scoreUpSkill==0? 'input-error': ''"></i><span class="input-radio-margin-s">会P图</span>
          <input type="checkbox"value="段子手" v-model="scoreUpSkill" name="score-up-skill">
          <i :class="dc==2&&scoreUpSkill==0? 'input-error': ''"></i><span class="input-radio-margin-s">段子手</span>
          <input type="checkbox"value="其他" v-model="scoreUpSkill" name="score-up-skill">
          <i :class="dc==2&&scoreUpSkill==0? 'input-error': ''"></i><span>其他</span>
        </div>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">7. 请列出一周内最具有热议性的一件事并附上自己的看法</label>
        <textarea :class="dc==2&&hotEvent==''? 'input-error': ''" class="textarea-large" v-model="hotEvent" name="" id="" cols="30" rows="6"></textarea>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">8. 加入的理由</label>
        <textarea :class="dc==2&&joinReason==''? 'input-error': ''" class="textarea-large" v-model="joinReason" name="" id="" cols="30" rows="6" placeholder="请输入加入的理由"></textarea>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">9. 其他补充信息</label>
        <textarea :class="dc==2&&otherInfo==''? 'input-error': ''" class="textarea-large" v-model="otherInfo" name="" id="" cols="30" rows="6" placeholder="请输入其他补充信息"></textarea>
      </div>
    </form>
    <div class="next-step-wrap">
      <button class="next-step-btn" onclick="tobox32()"></button>
    </div>
  </div>
</div>
<!-- 报名页面 2-3 设计 -->
<div class="main-wrap box-2-3 animated bounceInUp" id="app-2-3" style="display:none;">
  <div class="progressbar progressbar-2">
    <div onclick="backtobox1(2,3)"></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="content-list">
    <form action="">
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">1. 是否熟悉PS、AI等文字编辑软件？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="softwareUse" name="software-use">
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="softwareUse" name="software-use">
=======
          <input type="radio" value="1" v-model="softwareUse" name="software-use" @change="addDataOnce(softwareDetail, 'addSoftware')">
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="softwareUse" name="software-use" @change="deleteDataAll(softwareDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group form-group-mar-l animated bounceIn" v-for="(item, index) in softwareDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">软件名称</label>
          <input :class="dc==2&&item['softwareName']==''? 'input-error': ''" type="text" v-model="item['softwareName']" placeholder="请输入你掌握的软件名称">
        </div>
        <div class="form-group form-group-mar-l">
          <label for="">熟练程度</label>
          <input :class="dc==2&&item['softwareSkill']==0? 'input-error': ''" type="text" disabled="disabled">
          <div class="input-radio-wbg">
<<<<<<< HEAD
            <input type="radio" value="1" v-model="item['softwareSkill']" :name="'software-skill' + index">
            <i></i><span class="input-radio-margin-s">了解</span>
            <input type="radio" value="2" v-model="item['softwareSkill']" :name="'software-skill' + index">
            <i></i><span class="input-radio-margin-s">掌握</span>
            <input type="radio" value="3" v-model="item['softwareSkill']" :name="'software-skill' + index">
=======
            <input type="radio" value="1" v-model="item['softwareSkill']" name="software-skill">
            <i></i><span class="input-radio-margin-s">了解</span>
            <input type="radio" value="2" v-model="item['softwareSkill']" name="software-skill">
            <i></i><span class="input-radio-margin-s">掌握</span>
            <input type="radio" value="3" v-model="item['softwareSkill']" name="software-skill">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
            <i></i><span>精通</span>
          </div>
          <div class="input-tips-normal"  v-if="index==0">了解：对软件极其基本功能有初步的了解，会使用一些基本的操作<br>掌握：熟练使用软件的各个功能，会做一些简单的设计及图片处理<br>精通：完全独立的制作优质的平面设计，会一些高难度的图像处理<br>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addSoftware()" v-if="softwareDetail.length>=1">增加软件信息</div>
        <div class="add-item-btn delete-btn" @click="deleteSoftware()" v-if="softwareDetail.length>=2">删除软件信息</div>
      </div>
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">2. 是否有优秀设计作品？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="goodWork" name="good-work">
          <i :class="dc==2&&goodWork==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="goodWork" name="good-work">
=======
          <input type="radio" value="1" v-model="goodWork" name="good-work" @change="addDataOnce(goodWorkDetail, 'addGoodWork')">
          <i :class="dc==2&&goodWork==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="goodWork" name="good-work" @change="deleteDataAll(goodWorkDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&goodWork==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in goodWorkDetail">
<<<<<<< HEAD
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
=======
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
        <label for="">作品链接</label>
        <input :class="dc==2&&item['workLink']==''? 'input-error': ''" type="text" v-model="item['workLink']" placeholder="请输入你的作品链接">
      </div>
      <div class="form-group">
        <vid class="add-item-btn animated bounceIn" @click="addGoodWork()" v-if="goodWorkDetail.length>=1">增加作品信息</vid>
        <div class="add-item-btn delete-btn" @click="deleteGoodWork()" v-if="goodWorkDetail.length>=2">删除作品信息</div>
      </div>
      <div class="form-group">
        <label for="" class="form-group-title">3. 是否有很强的自学能力？</label>
        <div>
          <input type="radio" value="1" v-model="selfLearn" name="self-learn">
          <i :class="dc==2&&selfLearn==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="selfLearn" name="self-learn">
          <i :class="dc==2&&selfLearn==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">4. 加入的理由</label>
        <textarea :class="dc==2&&joinReason==''? 'input-error': ''" class="textarea-large" v-model="joinReason" name="" id="" cols="30" rows="6" placeholder="请输入加入的理由"></textarea>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">5. 其他补充信息</label>
        <textarea :class="dc==2&&otherInfo==''? 'input-error': ''" class="textarea-large" v-model="otherInfo" name="" id="" cols="30" rows="6" placeholder="请输入其他补充信息"></textarea>
      </div>
    </form>
    <div class="next-step-wrap">
      <button class="next-step-btn" onclick="tobox33()"></button>
    </div>
  </div>
</div>
<!-- 报名页面 2-4 摄影 -->
<div class="main-wrap box-2-4 animated bounceInUp" id="app-2-4" style="display:none;">
  <div class="progressbar progressbar-2">
    <div onclick="backtobox1(2,4)"></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="content-list">
    <form action="">
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">1. 是否拥有单反等拍摄设备？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="camera" name="camera">
          <i :class="dc==2&&camera==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="camera" name="camera">
=======
          <input type="radio" value="1" v-model="camera" name="camera" @change="addDataOnce(cameraDetail, 'addCamera')">
          <i :class="dc==2&&camera==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="camera" name="camera" @change="deleteDataAll(cameraDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&camera==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in cameraDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">设备品牌</label>
          <input :class="dc==2&&item['cameraBrand']==''? 'input-error': ''" type="text" v-model="item['cameraBrand']" placeholder="请输入你拥有的设备品牌">
        </div>
        <div class="form-group-inner">
          <label for="">设备型号</label>
          <input :class="dc==2&&item['cameraVersion']==''? 'input-error': ''" type="text" v-model="item['cameraVersion']" placeholder="请输入你拥有的设备型号">
        </div>
        <div class="form-group">
          <label for="">镜头参数</label>
          <input :class="dc==2&&item['lens']==''? 'input-error': ''" type="text" v-model="item['lens']" placeholder="请输入所具备的镜头参数">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addCamera()" v-if="cameraDetail.length>=1">增加设备信息</div>
        <div class="add-item-btn delete-btn" @click="deleteCamera()" v-if="cameraDetail.length>=2">删除设备信息</div>
      </div>
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">1. 是否能使用PS等图形处理工具？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="softwareUse" name="software-use">
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="softwareUse" name="software-use">
=======
          <input type="radio" value="1" v-model="softwareUse" name="software-use" @change="addDataOnce(softwareDetail, 'addSoftware')">
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="softwareUse" name="software-use" @change="deleteDataAll(softwareDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group form-group-mar-l animated bounceIn" v-for="(item, index) in softwareDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">软件名称</label>
          <input :class="dc==2&&item['softwareName']==''? 'input-error': ''" type="text" v-model="item['softwareName']" placeholder="请输入你掌握的软件名称">
        </div>
        <div class="form-group form-group-mar-l">
          <label for="">熟练程度</label>
          <input :class="dc==2&&item['softwareSkill']==0? 'input-error': ''" type="text" disabled="disabled">
          <div class="input-radio-wbg">
<<<<<<< HEAD
            <input type="radio"value="1" v-model="item['softwareSkill']" :name="'software-skill' + index"><i></i><span class="input-radio-margin-s">了解</span>
            <input type="radio"value="2" v-model="item['softwareSkill']" :name="'software-skill' + index"><i></i><span class="input-radio-margin-s">掌握</span>
            <input type="radio"value="3" v-model="item['softwareSkill']" :name="'software-skill' + index"><i></i><span>精通</span>
=======
            <input type="radio"value="1" v-model="item['softwareSkill']" name="software-skill"><i></i><span class="input-radio-margin-s">了解</span>
            <input type="radio"value="1" v-model="item['softwareSkill']" name="software-skill"><i></i><span class="input-radio-margin-s">掌握</span>
            <input type="radio"value="1" v-model="item['softwareSkill']" name="softwares-skill"><i></i><span>精通</span>
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          </div>
          <div class="input-tips-normal" v-if="index==0">
          了解：会简单的照片美化<br>
          掌握：会做平面设计，具有美学基础<br>
          精通：可独立完成，会做动画、视频等特效<br>
          </div>
        </div>
      </div>
      <div class="form-group" style="margin-top:-10px;">
        <div class="add-item-btn animated bounceIn" @click="addSoftware()" v-if="softwareDetail.length>=1">增加软件信息</div>
        <div class="add-item-btn delete-btn" @click="deleteSoftware()" v-if="softwareDetail.length>=2">删除使用软件</div>
      </div>
      <div class="form-group" style="margin-bottom:10px;">
        <label for="" class="form-group-title">3. 是否有优秀的摄影作品？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="goodWork" name="good-work">
          <i :class="dc==2&&goodWork==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="goodWork" name="good-work">
=======
          <input type="radio" value="1" v-model="goodWork" name="good-work" @change="addWorkOnce()">
          <i :class="dc==2&&goodWork==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="goodWork" name="good-work" @change="deleteWorkAll()">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&goodWork==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="n in fileCount">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="n>=2">
        <label for="" class="label-high-input" style="transform:translateY(6px);">上传作品</label>
        <div class="upload-wrap">
          <input type="file" :ref="'fileUpload'+n" class="upload-input" @change="addPhoto(n)">
          <i class="photo-upload" :class="dc==2&&fileLink[n-1]==undefined? 'input-error': ''"></i>
          <span href="javascript:void(0)" :ref="'uploadText'+n" class="upload-btn" @click="uploadBtn(n)">上传</span>
          <div class="upload-file-name" :ref="'uploadFileName'+n">${uploadFileName[n-1]}</div>
          <div class="animated pulse" style="margin-top:80px;width:120px;" v-if="fileLink[n-1]">上传成功!</div>
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" v-if="fileCount>=1" @click="addWork()">增加作品信息</div>
        <div class="add-item-btn delete-btn" @click="deleteWork()" v-if="fileCount>=2">删除作品信息</div>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">4. 加入的理由</label>
        <textarea :class="dc==2&&joinReason==''? 'input-error': ''" class="textarea-large" v-model="joinReason" name="" id="" cols="30" rows="6" placeholder="请输入加入的理由"></textarea>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">5. 其他补充信息</label>
        <textarea :class="dc==2&&otherInfo==''? 'input-error': ''" class="textarea-large" v-model="otherInfo" name="" id="" cols="30" rows="6" placeholder="请输入其他补充信息"></textarea>
      </div>
    </form>
    <div class="next-step-wrap">
      <button class="next-step-btn" onclick="tobox34()"></button>
    </div>
  </div>
</div>
<!-- 报名页面 2-5 开发 -->
<div class="main-wrap box-2-5 animated bounceInUp" id="app-2-5" ref="box25" style="display:none;">
  <div class="progressbar progressbar-2">
    <div onclick="backtobox1(2,5)"></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="content-list">
    <form action="">
      <div class="form-group">
        <label for="" class="form-group-title">1. 请列举你熟悉的框架和技术？</label>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in techDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">框架名称</label>
          <input :class="dc==2&&item['frame']==''? 'input-error': ''" type="text" v-model="item['frame']" placeholder="请输入你所熟悉的框架名称">
        </div>
        <div class="form-group">
          <label for="">技术名称</label>
          <input :class="dc==2&&item['skill']==''? 'input-error': ''" type="text" v-model="item['skill']" placeholder="请输入你所熟悉的技术名称">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn" @click="addTech()">增加能力信息</div> 
        <div class="add-item-btn delete-btn" @click="deleteTech()" v-if="techDetail.length>=2">删除能力信息</div>
      </div>
      <div class="form-group">
        <label for="" class="form-group-title">2. 请上传页面前端或后端作品？</label>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in workDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">作品名称</label>
          <input :class="dc==2&&item['workName']==''? 'input-error': ''" type="text" v-model="item['workName']" placeholder="请输入你的作品名称">
        </div>
        <div class="form-group">
          <label for="">技术链接</label>
          <input :class="dc==2&&item['workLink']==''? 'input-error': ''" type="text" v-model="item['workLink']" placeholder="请输入你的作品链接">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn" @click="addWork()">增加作品信息</div>
        <div class="add-item-btn delete-btn" @click="deleteWork()" v-if="workDetail.length>=2">删除作品信息</div>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">3. 加入的理由</label>
        <textarea :class="dc==2&&joinReason==''? 'input-error': ''" class="textarea-large" v-model="joinReason" name="" id="" cols="30" rows="6" placeholder="请输入加入的理由"></textarea>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">4. 其他补充信息</label>
        <textarea :class="dc==2&&otherInfo==''? 'input-error': ''" class="textarea-large" v-model="otherInfo" name="" id="" cols="30" rows="6" placeholder="请输入其他补充信息"></textarea>
      </div>
    </form>
    <div class="next-step-wrap">
      <button class="next-step-btn" onclick="tobox35()"></button>
    </div>
  </div>
</div>
<!-- 报名页面 2-6 视频 -->
<div class="main-wrap box-2-6 animated bounceInUp" id="app-2-6" ref="box26" style="display:none;">
  <div class="progressbar progressbar-2">
    <div onclick="backtobox1(2,6)"></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="content-list">
    <form action="">
      <div class="form-group form-group-mar-l">
      <label for="" class="form-group-title">1. 是否拥有单反、无人机等拍摄设备？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="camera" name="camera">
          <i :class="dc==2&&camera==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="camera" name="camera">
=======
          <input type="radio" value="1" v-model="camera" name="camera" @change="addDataOnce(cameraDetail, 'addCamera')">
          <i :class="dc==2&&camera==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="camera" name="camera" @change="deleteDataAll(cameraDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&camera==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in cameraDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">设备品牌</label>
          <input :class="dc==2&&item['cameraBrand']==''? 'input-error': ''" type="text" v-model="item['cameraBrand']" placeholder="请输入你拥有的设备品牌">
        </div>
        <div class="form-group-inner">
          <label for="">设备型号</label>
          <input :class="dc==2&&item['cameraVersion']==''? 'input-error': ''" type="text" v-model="item['cameraVersion']" placeholder="请输入你拥有的设备型号">
        </div>
        <div class="form-group">
          <label for="">镜头参数</label>
          <input :class="dc==2&&item['lens']==''? 'input-error': ''" type="text" v-model="item['lens']" placeholder="请输入所具备的镜头参数">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addCamera()" v-if="cameraDetail.length>=1">增加设备信息</div>
        <div class="add-item-btn delete-btn" @click="deleteCamera()" v-if="cameraDetail.length>=2">删除设备信息</div>
      </div>
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">2. 是否接触过后期剪辑软件？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" v-model="softwareUse" value="1" name="xiumi-use">
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" v-model="softwareUse" value="2" name="xiumi-use">
=======
          <input type="radio" v-model="softwareUse" value="1" name="xiumi-use" @change="addDataOnce(softwareDetail, 'addSoftware')">
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" v-model="softwareUse" value="2" name="xiumi-use" @change="deleteDataAll(softwareDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&softwareUse==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in softwareDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">软件名称</label>
          <input :class="dc==2&&item['softwareName']==''? 'input-error': ''" type="text" v-model="item['softwareName']" placeholder="请输入你掌握的软件名称">
        </div>
        <div class="form-group">
          <label for="">熟练程度</label>
          <input :class="dc==2&&item['softwareSkill']==0? 'input-error': ''" type="text" disabled="disabled">
          <div class="input-radio-wbg">
<<<<<<< HEAD
            <input type="radio"value="1" v-model="item['softwareSkill']" :name="'software-skill' + index"><i></i><span class="input-radio-margin-s">了解</span>
            <input type="radio"value="2" v-model="item['softwareSkill']" :name="'software-skill' + index"><i></i><span class="input-radio-margin-s">掌握</span>
            <input type="radio"value="3" v-model="item['softwareSkill']" :name="'software-skill' + index"><i></i><span>精通</span>
=======
            <input type="radio"value="1" v-model="item['softwareSkill']" name="software-skill"><i></i><span class="input-radio-margin-s">了解</span>
            <input type="radio"value="2" v-model="item['softwareSkill']" name="software-skill"><i></i><span class="input-radio-margin-s">掌握</span>
            <input type="radio"value="3" v-model="item['softwareSkill']" name="software-skill"><i></i><span>精通</span>
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          </div>
          <div class="input-tips-normal" v-if="index==0">
          了解：对后期软件有初步了解，会基本的剪辑操作，能够独立剪辑成片<br>
          掌握：在剪辑成片的基础上，会应用转场文字等动画特效<br>
          精通：完全独立制作视频项目，熟练制作片头、片尾及视频特效<br>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addSoftware()" v-if="softwareDetail.length>=1">增加软件信息</div>
        <div class="add-item-btn delete-btn" @click="deleteSoftware()" v-if="softwareDetail.length>=2">删除软件信息</div>
      </div>
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">3. 是否有影视类、剧本类作品？</label>
        <div>
<<<<<<< HEAD
          <input type="radio"value="1" v-model="work" name="work">
          <i :class="dc==2&&work==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio"value="2" v-model="work" name="work">
=======
          <input type="radio"value="1" v-model="work" name="work" @change="addDataOnce(workDetail, 'addWork')">
          <i :class="dc==2&&work==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio"value="2" v-model="work" name="work" @change="deleteDataAll(workDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&work==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in workDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group-inner">
          <label for="">作品名称</label>
          <input :class="dc==2&&item['workName']==''? 'input-error': ''" type="text" v-model="item['workName']" placeholder="请输入你的作品名称">
        </div>
        <div class="form-group-inner">
          <label for="">作品类型</label>
          <input :class="dc==2&&item['workKind']==''? 'input-error': ''" type="text" v-model="item['workKind']" placeholder="请输入你的作品类型">
        </div>
        <div class="form-group">
          <label for="">作品链接</label>
          <input :class="dc==2&&item['workLink']==''? 'input-error': ''" type="text" v-model="item['workLink']" placeholder="请输入你的作品观看地址">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addWork()" v-if="workDetail.length>=1">增加作品信息</div>
        <div class="add-item-btn delete-btn" @click="deleteWork()" v-if="workDetail.length>=2">删除作品信息</div> 
      </div>
      <div class="form-group">
        <label class="label-wide" for="">4. 请加入的理由</label>
        <textarea :class="dc==2&&joinReason==''? 'input-error': ''" class="textarea-large" v-model="joinReason" name="" id="" cols="30" rows="6" placeholder="请输入加入的理由"></textarea>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">5. 其他补充信息</label>
        <textarea :class="dc==2&&otherInfo==''? 'input-error': ''" class="textarea-large" v-model="otherInfo" name="" id="" cols="30" rows="6" placeholder="请输入其他补充信息"></textarea>
      </div>
    </form>
    <div class="next-step-wrap">
      <div class="next-step-btn" onclick="tobox36()"></div>
    </div>
  </div>
</div>
<!-- 报名页面 3 -->
<div class="main-wrap box-3 animated bounceInUp" id="app-3" ref="box3" style="display:none;">
  <div class="progressbar progressbar-3">
    <div onclick="backtobox1(3)"></div>
    <div onclick="backtobox2()"></div>
    <div></div>
    <div></div>
  </div>
  <div class="content-list">
    <form action="">
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">1. 是否参与了学生会/社团等校内组织？</label>
        <div>
<<<<<<< HEAD
          <input type="radio" value="1" v-model="group" name="group">
          <i :class="dc==2&&group==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="group" name="group">
=======
          <input type="radio" value="1" v-model="group" name="group" @change="addDataOnce(groupDetail, 'addGroup')">
          <i :class="dc==2&&group==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="group" name="group" @change="deleteDataAll(groupDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&group==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in groupDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group form-group-mar-l">
          <label for="">组织名称</label>
          <input :class="dc==2&&item['groupName']==''? 'input-error': ''" type="text" v-model="item['groupName']" placeholder="请输入你加入的组织全称">
        </div>
        <div class="form-group">
          <label for="">担任职务</label>
          <input :class="dc==2&&item['position']==''? 'input-error': ''" type="text" v-model="item['position']" placeholder="请输入你担任的职务全称">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addGroup()" v-if="groupDetail.length>=1">增加组织信息</div>
        <div class="add-item-btn delete-btn" @click="deleteGroup()" v-if="groupDetail.length>=2">删除组织信息</div>
      </div>
      <div class="form-group">
        <label class="label-wide" for="">2. 你参与了那些校内活动？</label>
        <textarea :class="dc==2&&innerAct==''? 'input-error': ''" class="textarea-large" v-model="innerAct" name="" id="" cols="30" rows="6" placeholder="请输入你所参与的活动名称和你所扮演的角色，若没有请填无"></textarea>
      </div>
      <div class="form-group form-group-mar-l">
        <label for="" class="form-group-title">3. 是否参与了魅族的其它组织？</label>
        <div>
<<<<<<< HEAD
          <input type="radio"value="1" v-model="meizuGroup" name="meizu-group">
          <i :class="dc==2&&meizuGroup==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio"value="2" v-model="meizuGroup" name="meizu-group">
=======
          <input type="radio"value="1" v-model="meizuGroup" name="meizu-group" @change="addDataOnce(meizuGroupDetail, 'addMeizuGroup')">
          <i :class="dc==2&&meizuGroup==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio"value="2" v-model="meizuGroup" name="meizu-group" @change="deleteDataAll(meizuGroupDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&meizuGroup==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in meizuGroupDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group">
          <label for="">组织名称</label>
          <input :class="dc==2&&item['groupName']==''? 'input-error': ''" v-model="item['groupName']" type="text" placeholder="请输入加入的魅族组织全称">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addMeizuGroup()" v-if="meizuGroupDetail.length>=1">增加组织信息</div>
        <div class="add-item-btn delete-btn" @click="deleteMeizuGroup()" v-if="meizuGroupDetail.length>=2">删除组织信息</div>
      </div>
      <div class="form-group form-group-mar-l">
<<<<<<< HEAD
        <label for="" class="form-group-title">4. 是否参与了其他校外组织？</label>
        <div>
          <input type="radio" value="1" v-model="outerGroup" name="outerGroup">
          <i :class="dc==2&&outerGroup==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="outerGroup" name="outerGroup">
=======
        <label for="" class="form-group-title">3. 是否参与了其他校外组织？</label>
        <div>
          <input type="radio" value="1" v-model="outerGroup" name="outerGroup" @change="addDataOnce(outerGroupDetail, 'addOuterGroup')">
          <i :class="dc==2&&outerGroup==0? 'input-error': ''"></i><span class="input-radio-margin-l">是</span>
          <input type="radio" value="2" v-model="outerGroup" name="outerGroup" @change="deleteDataAll(outerGroupDetail)">
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
          <i :class="dc==2&&outerGroup==0? 'input-error': ''"></i><span>否</span>
        </div>
      </div>
      <div class="form-group animated bounceIn" v-for="(item, index) in outerGroupDetail">
        <hr style="width:80%;margin:10px auto;transform:translateY(-14px);" v-if="index>=1">
        <div class="form-group">
          <label for="">组织名称</label>
          <input :class="dc==2&&item['groupName']==''? 'input-error': ''" type="text" v-model="item['groupName']" placeholder="请输入加入的校外组织全称">
        </div>
      </div>
      <div class="form-group">
        <div class="add-item-btn animated bounceIn" @click="addOuterGroup()" v-if="outerGroupDetail.length>=1">增加组织信息</div>
        <div class="add-item-btn delete-btn" @click="deleteOuterGroup()" v-if="outerGroupDetail.length>=2">删除组织信息</div>
      </div>
      <div class="form-group">
<<<<<<< HEAD
        <label class="label-wide" for="">5. 你参与了那些校外活动？</label>
=======
        <label class="label-wide" for="">2. 你参与了那些校内活动？</label>
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
        <textarea :class="dc==2&&outerAct==''? 'input-error': ''" class="textarea-large" v-model="outerAct" placeholder="请输入你所参与的活动名称和你所扮演的角色，若没有请填无" name="" id="" cols="30" rows="6"></textarea>
      </div>
    </form>
    <div class="next-step-wrap">
      <div class="next-step-btn" onclick="submit()"></div>
    </div>
  </div>
</div>

<!-- 报名页面 4 -->
<div class="main-wrap box-4 animated bounceInUp" id="app-4" style="display:none">
  <div class="progressbar progressbar-4">
    <div href=""></div>
    <div href=""></div>
    <div href=""></div>
    <div href=""></div>
  </div>
  <div class="content-list">
    <div class="upload-success">
      <img src="{{asset('assets/apply/img/success-icon.png')}}" alt="">
      <span>提交成功</span>
    </div>
    <div class="success-info">
      请务必关注魅蓝校园微信服务号<br>
      报名审核进度将实时通过微信反馈
    </div>
    <div class="follow-meilan" @click="successModalToggle=true">点击关注 魅蓝校园</div>
  </div>
  <div class="qrcode-modal" v-if="successModalToggle==true">
    <div class="qrcode-modal-mask" @click="successModalToggle=false"></div>
    <div class="qrcode-content">
      <img src="{{asset('assets/apply/img/QRcode.png')}}" alt="">
      <div>长按二维码关注</div>
    </div>
  </div>
</div>

<!-- 弹窗 -->
<div class="apply-modal-bg animated zoomOut" id="modal" style="display:none;">
  <div class="apply-modal">
    <div class="apply-modal-info">请确认全部已填写!</div>
    <div class="apply-modal-btn" onclick="closeModal()">确认</div>
  </div>
</div>

<<<<<<< HEAD
<div class="apply-modal-bg animated zoomOut" id="modal-submit" style="display:none;">
  <div class="apply-modal">
    <div class="apply-modal-info" id="modal-submit-content"></div>
    <div class="apply-modal-btn" onclick="closeModalSubmit()">确认</div>
  </div>
</div>

=======
@endsection
@section('js')
<script>
window.onbeforeunload = function () {
  return '有信息未保存，确认离开？！';
}

function windowScroll() {
  $('body').css({'position': 'relative'});
}

function windowScrollStop(parm) {
  $('body').css({'position': 'fixed', 'transform': `translateY(-${parm}px)`});
}

let userapply = 0;     // 这个参数用于在四个页面的跳转时的判断, 
                       // 记录用户进入第二个页面的哪一个页面,
                       // 1 策划  2 运营  3 设计  4 摄影  5 开发  6 视频

let applyDetail = {    // 这个参数用于保存用户在填写第二个页面的数据
  applyDetail21: '',
  applyDetail22: '',
  applyDetail23: '',
  applyDetail24: '',
  applyDetail25: '',
  applyDetail26: '',
};

function closeModal() {
  $('#modal').css('display', 'none');
}
function checkData(data) {
  for (var i in data) {
    console.log(i, data[i])
    if (data[i] === '' || data === 0) {
      $('html,body').animate({scrollTop: '0px'}, 800);
      $('#modal').css('display', 'block')
      return true;
    }
  }
}

function backtobox1(num1, num2) {
  let boxName;
  if (num2) {
    boxName = `#app-${num1}-${num2}`;
  } else {
    boxName = `#app-${num1}`;
  }
  
  console.log(boxName);
  $(boxName).css('display', 'none');
  $('#app-1').css('display', 'block');
  $(window).scrollTop(0);
}

function backtobox2() {
  let boxName = `#app-2-${userApply}`;
  console.log(boxName);

  $('#app-3').css('display', 'none');
  $(boxName).css('display', 'block');
  $(window).scrollTop(0);
}


var app1 = new Vue({
  el: '#app-1',
  delimiters: ['${', '}'],
  data: {
    name: '',
    sex: 0,
    province: 0,
    city: 0,
    school: '',
    zone: '', 
    profession: '',   // 专业
    degree: 0,        // 学历  1 博士  2 硕士  3 学士  4 专科
    education: 0,
    grade: 0,
    phone: '',
    wechat: '',
    qq: '',
    email: '',
    photo: '',
    apply: '',

    // provinceSelectId: '0',

    // citySelect: '0',
    // citySelectId: '0',

    provinceList: [],
    cityList: [],
    schoolList: [],
    schoolListFiltered: [],
    shoolListFilteredShow: 1,

    uploadText: '上 传',

    uploadFileName: '',

    applyIntro: 1,
    tabActiveFlag: 1,
    tabActiveShow: 1,

    dc: 1,    // dataCheck

    eduList: {
      2: '两年制',
      3: '三年制',
      4: '四年制',
      5: '五年制'
    },
    eduYearList: {
      2: ['一年级', '两年级'],
      3: ['一年级','二年级','三年级'],
      4: ['一年级','二年级','三年级','四年级'],
      5: ['一年级','二年级','三年级','四年级','五年级']
    },
    applyList: [
      {'name': '活动策划','subname': 'MKT Planning'},
      {'name': '内容运营','subname': 'Content Operation'},
      {'name': '设计师','subname': 'Designer'},
      {'name': '摄影师','subname': 'Photographer'},
      {'name': '智库开发组','subname': 'Think Tank - Programming Team'},
      {'name': '智库视频组','subname': 'Think Tank - Video Team'}
    ],

    applySelected: '0',   // string
    applyToNextPage: 0    // 将applySeleceted的string转换成数值,
                          // 1 策划, 2 运营, 3 设计, 4 摄影, 5 开发, 6 视频
  },
  watch: {
    name: function(val) {
      console.log(val);
    },
    sex: function(val) {
      console.log(val);
    },
    degree: function(val, oldVal) {
      console.log(val);
      this.filterApplyList();
      console.log(this.applyList);
    },
    grade: function(val, oldVal) {
      console.log(val);
      this.filterApplyList();
      console.log(this.applyList);
    },
    applySelected: function(val, oldVal) {
      console.log(val);
      this.applyFun();
    },
    school: function(val) {
      console.log(val);
    },
    phone: function() {
      this.phoneCheck('none');
    },
    email: function() {
      this.emailCheck('none');
    },
    photo: function(val) {
      console.log(val);
      let _this = this;
      this.$refs.uploadSuccess.style.display = 'block';
      setTimeout(function() {
        _this.$refs.uploadSuccess.style.display = 'none';
      }, 5000);
    },
    profession: function(val) {
      console.log(val);
    },
    provinceSelectId: function(val) {
      console.log(val);
      this.provinceIdToName();
    },
    province: function(val) {
      console.log(val);
    },
    schoolList: function(val) {
      console.log(val);
    },
    school: function(val) {
      console.log(val);
      this.shoolListFilteredShow = 2;
      this.schoolListFilter();
    },
    provinceList: function(val) {
      console.log(val);
    },
    city: function(val) {
      console.log(val);
    },
    schoolList: function(val) {
      console.log(val);
    }
  },
  created: function() {
    let _this = this;
    jQuery.get('/api/location', function(data) {
      _this.provinceList = data;
    });
    // this.provinceList = province;

  },
  mounted() {
  },
  methods: {
    changeProvince: function() {
      // this.cityList = city[this.provinceSelectId];

      for (let i in this.provinceList) {
        if (this.province == this.provinceList[i]['id']) {
          console.log(this.provinceList[i]);
          this.cityList = this.provinceList[i]['cities'];
          break;
        }
      }
    },

    changeCity: function() {
      // this.citySelectId = this.citySelect.slice(0,3);
      // this.city = this.citySelect.slice(3);
      // this.schoolList = allschool[this.citySelectId];
      // console.log(this.citySelectId);
      // console.log(this.city);

      let _this = this;
      let settings = {
        city: this.city,
        province: this.province
      };

      jQuery.get('api/schools', settings, function(data) {
        _this.schoolList = data;
      });

    },
    schoolListFilter: function() {
      this.schoolListFiltered.length = 0;
      for (let i in this.schoolList) {
        if (this.schoolList[i]['name'].match(this.school) !== null) {
          this.schoolListFiltered.push(this.schoolList[i]);
        }
      }
    },
    selectSchool: function(schoolName) {
      this.school = schoolName;
      this.shoolListFilteredShow = 2;
    },
    addPhoto: function() {
      console.log(this.$refs.photoUpload.files[0]);
      this.uploadFileName = this.$refs.photoUpload.files[0].name;
      this.$refs.photoPreview.style.backgroundImage = 'none';
    },
    uploadBtn: function() {
      let formData = new FormData();
      let _this = this;
      console.log(this.$refs.photoUpload.files[0]);
      if (!this.$refs.photoUpload.files[0]) {
        return
      }
      this.uploadText = '上传中',
      _this.$refs.uploadText.style.color = '#fff';
      _this.$refs.uploadText.style.backgroundImage = 'none';
      formData.append('image', this.$refs.photoUpload.files[0]);
      jQuery.ajax({
        url: 'http://www.m-union.net.cn/common/upload?source=apply&type=image',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
          _this.photo = res;
          _this.$refs.uploadText.style.color = 'transparent';
          _this.$refs.uploadText.style.backgroundImage = 'url(http://www.m-union.net.cn/assets/apply/img/upload-icon.png)';
        }
      })
    },
    phoneCheck: function(flag) {
      this.$refs.phoneTips.style.display = flag;
      
    },
    emailCheck: function(flag) {
      this.$refs.emailTips.style.display = flag;
    },
    openApplyModal: function() {
      this.applyIntro = 2;
      this.$refs.applyIntroContainer.style.top = `${document.body.scrollTop + document.body.offsetHeight * 0.07}px`;
      // windowScrollStop(document.body.scrollTop);
    },
    closeApplyModal: function() {
      this.applyIntro = 1;
      // windowScroll(); 
    },
    // provinceIdToName: function() {
    //   if(this.provinceSelectId === '00') { this.province = 'beijing'; }
    //   if(this.provinceSelectId === '01') { this.province = 'chongqing'; }
    //   if(this.provinceSelectId === '02') { this.province = 'fujian'; }
    //   if(this.provinceSelectId === '03') { this.province = 'jiangsu'; }
    //   if(this.provinceSelectId === '04') { this.province = 'guangdong'; }
    //   if(this.provinceSelectId === '05') { this.province = 'liaoning'; }
    //   if(this.provinceSelectId === '06') { this.province = 'neimenggu'; }
    //   if(this.provinceSelectId === '07') { this.province = 'shanxi'; }
    //   if(this.provinceSelectId === '08') { this.province = 'qinghai'; }
    //   if(this.provinceSelectId === '09') { this.province = 'sichuan'; }
    //   if(this.provinceSelectId === '10') { this.province = 'guizhou'; }
    //   if(this.provinceSelectId === '11') { this.province = 'yunnan'; }
    //   if(this.provinceSelectId === '12') { this.province = 'shaanxi'; }
    //   if(this.provinceSelectId === '13') { this.province = 'xizang'; }
    //   if(this.provinceSelectId === '14') { this.province = 'ningxia'; }
    //   if(this.provinceSelectId === '15') { this.province = 'xinjiang'; }
    //   if(this.provinceSelectId === '16') { this.province = 'guangxi'; }
    //   if(this.provinceSelectId === '17') { this.province = 'hainan'; }
    //   if(this.provinceSelectId === '18') { this.province = 'hunan'; }
    //   if(this.provinceSelectId === '19') { this.province = 'hubei'; }
    //   if(this.provinceSelectId === '20') { this.province = 'henan'; }
    //   if(this.provinceSelectId === '21') { this.province = 'shandong'; }
    //   if(this.provinceSelectId === '22') { this.province = 'jiangxi'; }
    //   if(this.provinceSelectId === '23') { this.province = 'anhui'; }
    //   if(this.provinceSelectId === '24') { this.province = 'zhejiang'; }
    //   if(this.provinceSelectId === '25') { this.province = 'shanghai'; }
    //   if(this.provinceSelectId === '26') { this.province = 'heilongjiang'; }
    //   if(this.provinceSelectId === '27') { this.province = 'jilin'; }
    //   if(this.provinceSelectId === '28') { this.province = 'gansu'; }
    //   if(this.provinceSelectId === '29') { this.province = 'tianjin'; }
    //   if(this.provinceSelectId === '30') { this.province = 'hebei'; }
    // },
    tabActive: function(name, index) {
      this.tabActiveFlag = index + 1;
      if(name == '活动策划') {
        this.tabActiveShow = 1;
      } else if(name == '内容运营') {
        this.tabActiveShow = 2;
      } else if(name == '设计师') {
        this.tabActiveShow = 3;
      } else if(name == '摄影师') {
        this.tabActiveShow = 4;
      } else if(name == '智库开发组') {
        this.tabActiveShow = 5;
      } else if(name == '智库视频组') {
        this.tabActiveShow = 6;
      } else if(name == '高级活动策划') {
        this.tabActiveShow = 7;
      } else if(name == '高级内容运营') {
        this.tabActiveShow = 8;
      } else if(name == '高级设计师') {
        this.tabActiveShow = 9;
      } else if(name == '高级摄影师') {
        this.tabActiveShow = 10;
      } else if(name == '智库策划组') {
        this.tabActiveShow = 11;
      } else if(name == '智库运营组') {
        this.tabActiveShow = 12;
      } else if(name == '智库设计组') {
        this.tabActiveShow = 13;
      } else if(name == '智库摄影组') {
        this.tabActiveShow = 14;
      }
    },
    filterApplyList: function() {
      // reset
      this.applyList = {
        1: [{'name': '活动策划','subname': 'MKT Planning'},
            {'name': '内容运营','subname': 'Content Operation'},
            {'name': '设计师','subname': 'Designer'},
            {'name': '摄影师','subname': 'Photographer'},
            {'name': '智库开发组','subname': 'Think Tank - Programming Team'},
            {'name': '智库视频组','subname': 'Think Tank - Video Team'}],
            
        2: [{'name': '高级活动策划','subname': 'Senior MKT Planning'},
            {'name': '高级内容运营','subname': 'Senior Content Operation'},
            {'name': '高级设计师','subname': 'Senior Designer'},
            {'name': '高级摄影师','subname': 'Senior Photographer'},
            {'name': '智库开发组','subname': 'Think Tank - Programming Team'},
            {'name': '智库视频组','subname': 'Think Tank - Video Team'}],

        3: [{'name': '智库策划组','subname': 'Think Tank - Planning Team'},
            {'name': '智库运营组','subname': 'Think Tank - Operation Team'},
            {'name': '智库设计组','subname': 'Think Tank - Design Team'},
            {'name': '智库摄影组','subname': 'Think Tank - Photography Team'},
            {'name': '智库开发组','subname': 'Think Tank - Programming Team'},
            {'name': '智库视频组','subname': 'Think Tank - Video Team'}]
      };

      if(this.degree == '1' || this.degree == '2' || this.grade == '4' || this.grade == '5') {
        this.applyList = this.applyList[3];
      } else if(this.grade == '3') {
        this.applyList = this.applyList[3];
      } else if(this.grade == '2') {
        this.applyList = this.applyList[2];
      } else {
        this.applyList = this.applyList[1];
      }
    },
    applyFun: function() {
      if(this.applySelected == '活动策划') {
        this.apply = 1;
        this.applyToNextPage = 1;
      } else if(this.applySelected == '内容运营') {
        this.apply = 2;
        this.applyToNextPage = 2;
      } else if(this.applySelected == '设计师') {
        this.apply = 3;
        this.applyToNextPage = 3;
      } else if(this.applySelected == '摄影师') {
        this.apply = 4;
        this.applyToNextPage = 4;
      } else if(this.applySelected == '智库开发组') {
        this.apply = 5;
        this.applyToNextPage = 5;
      } else if(this.applySelected == '智库视频组') {
        this.apply = 6;
        this.applyToNextPage = 6;
      } else if(this.applySelected == '高级活动策划') {
        this.apply = 7;
        this.applyToNextPage = 1;
      } else if(this.applySelected == '高级内容运营') {
        this.apply = 8;
        this.applyToNextPage = 2;
      } else if(this.applySelected == '高级设计师') {
        this.apply = 9;
        this.applyToNextPage = 3;
      } else if(this.applySelected == '高级摄影师') {
        this.apply = 10;
        this.applyToNextPage = 4;
      } else if(this.applySelected == '智库策划组') {
        this.apply = 11;
        this.applyToNextPage = 1;
      } else if(this.applySelected == '智库运营组') {
        this.apply = 12;
        this.applyToNextPage = 2;
      } else if(this.applySelected == '智库设计组') {
        this.apply = 13;
        this.applyToNextPage = 3;
      } else if(this.applySelected == '智库摄影组') {
        this.apply = 14;
        this.applyToNextPage = 4;
      }
    }
    ,
  }
});
function tobox2() {
  let phoneReg = app1.phone.match(/1[3|4|5|7|8][0-9]\d{4,8}/);
  let emailReg = app1.email.match(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/);

  app1.dc = 2;

  if (checkData(app1.$data)) {
    return
  }

  if (phoneReg === null && emailReg === null) {
    app1.phoneCheck('block');
    app1.emailCheck('block');
    return
  } else if (phoneReg === null) {
    app1.phoneCheck('block');
    return
  } else if (emailReg === null) {
    app1.emailCheck('block');
    return
  }

  if (app1.applyToNextPage == 0) {
    return
  }
  $('#app-1').css('display', 'none');
  if(app1.applyToNextPage == 1) {
    $('#app-2-1').css('display', 'block');
  } else if(app1.applyToNextPage == 2) {
    $('#app-2-2').css('display', 'block');
  } else if(app1.applyToNextPage == 3) {
    $('#app-2-3').css('display', 'block');
  } else if(app1.applyToNextPage == 4) {
    $('#app-2-4').css('display', 'block');
  } else if(app1.applyToNextPage == 5) {
    $('#app-2-5').css('display', 'block');
  } else if(app1.applyToNextPage == 6) {
    $('#app-2-6').css('display', 'block');
  }
  $(window).scrollTop(0);
}



// 活动策划
var app21 = new Vue({
  el: '#app-2-1',
  delimiters: ['${', '}'],
  data: {
    actExp: 0,
    actExpDetail: [],
    softwareUse: 0,
    softwareDetail: [],
    joinReason: '',
    otherInfo: '',

    dc: 1,        // dataCheck   1 pre-check    2 checking

    modalToggle: false
  },
  watch: {
    actExpDetail: function(val) {
      console.log(val);
    }
  },
  computed: {
  },
  methods: {
    addDataOnce: function(d, fun) {
      if(d.length >= 1) return;
      this[fun]();
    },
    deleteDataAll: function(d) {
      d.length = 0;
    },
    addActExp: function() {
      this.actExpDetail.push({
        'actName': '',
        'actKind': '',
        'actPosition': '',
        'actDone': ''
      });
    },
    deleteActExp: function() {
      this.actExpDetail.pop();
    },
    addSoftwareOnce: function() {
      if(this.softwareDetail.length >= 1) return;
      this.addSoftware();
    },
    addSoftware: function() {
      this.softwareDetail.push({
        'softwareName': '',
        'softwareSkill': 0
      })
    },
    deleteSoftware: function() {
      this.softwareDetail.pop();
    }
  }
})

function tobox31() {
  app21.dc = 2;
  if (checkData(app21.$data)) {
    return
  } else if ((app21.actExp == 1 && app21.actExpDetail == []) || 
  (app21.softwareUse == 1 && softwareDetail == [])) {
    return
  }

  userApply = 1;
  applyDetail['applyDetail21'] = app21.$data;
  $('#app-2-1').css('display', 'none');
  $('#app-3').css('display', 'block');
  $(window).scrollTop(0);
}


// 内容运营
var app22 = new Vue({
  el: '#app-2-2',
  delimiters: ['${', '}'],
  data: {
    editUse: 0,
    editDetail: [],
    accountOwn: 0,
    accountDetail: [],
    operateExp: 0,
    operateExpDetail: [],
    createScore: 0,    // 此数据从外部获取
    typesetScore: 0,   // 此数据从外部获取
    scoreUpSkill: [],
    hotEvent: '',
    joinReason: '',
    otherInfo: '',

    dc: 1    // datacheck
  },
  watch: {
    createScore: function(val) {
      console.log(val);
    },
    scoreUpSkill: function(val) {
      console.log(val);
    },
    scoreUpSkill: function(val) {
      console.log(val);
    }
  },
  methods: {
    addDataOnce: function(d, fun) {
      if(d.length >= 1) return;
      this[fun]();
    },
    deleteDataAll: function(d) {
      d.length = 0;
    },
    addEdit: function() {
      this.editDetail.push({
        editPlatform: '',
        workLink: ''
      })
    },
    deleteEdit: function() {
      this.editDetail.pop();
    },
    addAccount: function() {
      this.accountDetail.push({
        'platformName': '',
        'accountName': '',
        'workLink': ''
      })
    },
    deleteAccount: function() {
      this.accountDetail.pop();
    },
    addOperate: function() {
      this.operateExpDetail.push({
        'platformName': '',
        'accountName': '',
        'operateTime': '',
        'operateLearn': ''
      })
    },
    deleteOperate: function() {
      this.operateExpDetail.pop();
    },
  }
})

// 星星评分组件
$('#create-score').on('rating:change', function(event, value, caption) {
  console.log(value);
})
$('#typeset-score').on('rating:change', function(event, value, caption) {
  console.log(value);
})
function tobox32() {
  app22.dc = 2;
  if (checkData(app22.$data)) {
    return
  } else if ((app22.editUse == 1 && app22.editDetail == []) ||
  (app22.accountOwn == 1 && app22.accountDetail == []) || 
  (app22.operateExp == 1 && app22.operateExpDetail == []) || 
  (scoreUpSkill == [])) {
    return
  }

  userApply = 2;
  applyDetail['applyDetail22'] = app22.$data;
  console.log(app22.$data);
  $('#app-2-2').css('display', 'none');
  $('#app-3').css('display', 'block');
  $(window).scrollTop(0);
}

// 设计
var app23 = new Vue({
  el: '#app-2-3',
  delimiters: ['${', '}'],
  data: {
    softwareUse: 0,
    softwareDetail: [],
    goodWork: 0,
    goodWorkDetail: [],
    selfLearn: 0,
    joinReason: '',
    otherInfo: '',

    dc: 1  // datacheck
  },
  methods: {
    addDataOnce: function(d, fun) {
      if(d.length >= 1) return;
      this[fun]();
    },
    deleteDataAll: function(d) {
      d.length = 0;
    },
    addSoftware: function() {
      this.softwareDetail.push({
        'softwareName': '',
        'softwareSkill': 0
      })
    },
    deleteSoftware: function() {
      this.softwareDetail.pop();
    },
    addGoodWork: function() {
      this.goodWorkDetail.push({
        'workLink': ''
      })
    },
    deleteGoodWork: function() {
      this.goodWorkDetail.pop();
    }
  }
})

function tobox33() {
  app23.dc = 2;
  if (checkData(app23.$data)) {
    return
  } else if ((app23.softwareUse == 1 && app23.softwareDetail == []) || 
  (app23.goodWork == 1 && app23.goodWorkDetail == [])) {
    return
  }

  userApply = 3;
  applyDetail['applyDetail23'] = app23.$data;
  console.log(app23.$data);
  $('#app-2-3').css('display', 'none');
  $('#app-3').css('display', 'block');
  $(window).scrollTop(0);
}


// 摄影
var app24 = new Vue({
  el: '#app-2-4',
  delimiters: ['${', '}'],
  data: {
    camera: 0,
    cameraDetail: [],
    softwareUse: 0,
    softwareDetail: [],
    goodWork: 0,
    fileLink: [],
    joinReason: '',
    otherInfo: '',

    fileCount: 0,
    uploadFileName: [],

    dc: 1    // data check
  },
  methods: {
    addDataOnce: function(d, fun) {
      if(d.length >= 1) return;
      this[fun]();
    },
    deleteDataAll: function(d) {
      d.length = 0;
    },
    addCamera: function() {
      this.cameraDetail.push({
        cameraBrand: '',
        cameraVersion: '',
        lens: ''
      })
    },
    deleteCamera: function() {
      this.cameraDetail.pop();
    },
    addSoftware: function() {
      this.softwareDetail.push({
        'softwareName': '',
        'softwareSkill': 0
      })
    },
    deleteSoftware: function() {
      this.softwareDetail.pop();
    },
    addWork: function() {
      this.fileCount++;
    },
    addWorkOnce: function() {
      if (this.fileCount >= 1) return;
      this.fileCount = 1;
    },
    deleteWork: function() {
      this.fileCount--;
      this.fileLink.pop();
    },
    deleteWorkAll: function() {
      this.fileCount = 0;
      this.fileLink.length = 0;
    },
    addPhoto: function(n) {
      this.uploadFileName.push(this.$refs[`fileUpload${n}`][0].files[0].name);
      console.log(this.uploadFileName);
    },
    uploadBtn: function(n) {
      let formData = new FormData();
      let _this = this;

      let file = 'fileUpload' + n;
      let fileDom = this.$refs[file][0];

      console.log(fileDom.files[0]);
      if (!fileDom.files[0]) {
        return
      }
      
      formData.append('file', fileDom.files[0]);
      jQuery.ajax({
        url: 'http://www.m-union.net.cn/common/upload?source=apply&type=file',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
          _this.fileLink.push(res);
          console.log(_this.fileLink);
        }
      })
    }
  }
})

function tobox34() {
  app24.dc = 2;
  if (checkData(app24.$data)) {
    return
  } else if((app24.camera == 1 && app24.cameraDetail == []) || 
  app24.softwareUse == 1 && app24.softwareDetail == [] ||
  app24.goodWork == 1 && app24.fileLink == []) {
    return
  }

  userApply = 4;
  applyDetail['applyDetail24'] = app24.$data;
  console.log(app24.$data);
  $('#app-2-4').css('display', 'none');
  $('#app-3').css('display', 'block');
  $(window).scrollTop(0);
}

// 开发
var app25 = new Vue({
  el: '#app-2-5',
  delimiters: ['${', '}'],
  data: {
    techDetail: [{
      'frame': '',
      'skill': ''
    }],
    workDetail: [{
      'workName': '',
      'workLink': ''
    }],
    joinReason: '',
    otherInfo: '',

    dc: 1  // data check
  },
  methods: {
    addDataOnce: function(d, fun) {
      if(d.length >= 1) return;
      this[fun]();
    },
    deleteDataAll: function(d) {
      d.length = 0;
    },
    addTech: function() {
      this.techDetail.push({
        frame: '',
        skill: ''
      })
    },
    deleteTech: function() {
      this.techDetail.pop();
    },
    addWork: function() {
      this.workDetail.push({
        'workName': '',
        'workLink': ''
      })
    },
    deleteWork: function() {
      this.workDetail.pop();
    }
  }
})

function tobox35() {
  app25.dc = 2;
  if (checkData(app25.$data)) {
    return
  } else if(app25.techDetail['frame'] == '' || app25.techDetail['skill'] == '' ||
    app25.workDetail['workName'] == '' || app25.workDetail['workLink'] == '') {
      return
    }

  userApply = 5;
  applyDetail['applyDetail25'] = app25.$data;
  console.log(app25.$data);
  $('#app-2-5').css('display', 'none');
  $('#app-3').css('display', 'block');
  $(window).scrollTop(0);
}

// 视频
var app26 = new Vue({
  el: '#app-2-6',
  delimiters: ['${', '}'],
  data: {
    camera: 0,
    cameraDetail: [],
    softwareUse: 0,
    softwareDetail: [],
    work: 0,
    workDetail: [],
    joinReason: '',
    otherInfo: '',

    dc: 1

  },
  methods: {
    addDataOnce: function(d, fun) {
      if(d.length >= 1) return;
      this[fun]();
    },
    deleteDataAll: function(d) {
      d.length = 0;
    },
    addCamera: function() {
      this.cameraDetail.push({
        cameraBrand: '',
        cameraVersion: '',
        lens: ''
      })
    },
    deleteCamera: function() {
      this.cameraDetail.pop();
    },
    addSoftware: function() {
      this.softwareDetail.push({
        'softwareName': '',
        'softwareSkill': 0
      })
    },
    deleteSoftware: function() {
      this.softwareDetail.pop();
    },
    addWork: function() {
      this.workDetail.push({
        'workName': '',
        'workKind': '',
        'workLink': ''
      })
    },
    deleteWork: function() {
      this.workDetail.pop();
    }
  }
})

function tobox36() {
  app26.dc = 2;
  if (checkData(app26.$data)) {
    return
  } else if ((app26.camera == 1 && app26.cameraDetail == []) ||
  (app26.softwareUse == 1 && app26.softwareDetail == []) ||
  (app26.work == 1 && app26.workDetail == [])) {
    return
  }

  userApply = 6;
  applyDetail['applyDetail26'] = app26.$data;
  console.log(app26.$data);
  $('#app-2-6').css('display', 'none');
  $('#app-3').css('display', 'block');
  $(window).scrollTop(0);
}

var app3 = new Vue({
  el: '#app-3',
  delimiters: ['${', '}'],
  data: {
    group: 0,
    groupDetail: [],
    innerAct: '',
    meizuGroup: 0,
    meizuGroupDetail: [],
    outerGroup: 0,
    outerGroupDetail: [],
    outerAct: '',

    dc: 1   // data check

  },
  methods: {
    addDataOnce: function(d, fun) {
      if(d.length >= 1) return;
      this[fun]();
    },
    deleteDataAll: function(d) {
      d.length = 0;
    },
    addGroup: function() {
      this.groupDetail.push({
        groupName: '',
        position: ''
      })
    },
    deleteGroup: function() {
      this.groupDetail.pop();
    },
    addMeizuGroup: function() {
      this.meizuGroupDetail.push({
        groupName: ''
      })
    },
    deleteMeizuGroup: function() {
      this.meizuGroupDetail.pop();
    },
    addOuterGroup: function() {
      this.outerGroupDetail.push({
        groupName: ''
      })
    },
    deleteOuterGroup: function() {
      this.outerGroupDetail.pop();
    },
  }
})

function submit() {
  app3.dc = 2;
  if(checkData(app3.$data)) {
    return
  } else if ((app3.group == 1 && app3.groupDetail == []) ||
    (app3.meizuGroup == 1 && app3.meizuGroupDetail == []) ||
    (app3.outerGroup == 1 && app3.outerGroupDetail == [])) {
    reutrn
  }

  var form = new FormData();
  form.append('name', app1.name);
  form.append('sex', app1.sex);
  form.append('province', app1.province);
  form.append('city', app1.city);
  form.append('school', app1.school);
  form.append('zone', app1.zone);
  form.append('profession', app1.profession);
  form.append('degree', app1.degree);
  form.append('education', app1.education);
  form.append('grade', app1.grade);
  form.append('phone', app1.phone);
  form.append('wechat', app1.wechat);
  form.append('qq', app1.qq);
  form.append('email', app1.email)
  form.append('photo', app1.photo);
  form.append('apply', app1.apply);
  form.append('organization', JSON.stringify(app3.groupDetail));
  form.append('innerActivity', app3.innerAct);
  form.append('meizuOrg', JSON.stringify(app3.meizuGroupDetail));
  form.append('outerOrg', JSON.stringify(app3.outerGroupDetail));
  form.append('outerActivity', app3.outerAct);
  form.append('applyDetail', JSON.stringify(applyDetail[`applyDetail2${userApply}`]))


  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "http://www.m-union.net.cn/apply",
    "method": "POST",
    "headers": {
      "cache-control": "no-cache"
    },
    "processData": false,
    "contentType": false,
    "mimeType": "multipart/form-data",
    "data": form,
  }

  $.ajax(settings).done(function (res) {
    console.log(res);
    if (JSON.parse(res).error_code == 0) {
      $('#app-3').css('display', 'none');
      $('#app-4').css('display', 'block');
      $(window).scrollTop(0);
    }
  });
}


var app4 = new Vue({
  el: '#app-4',
  delimiters: ['${', '}'],
  data: {
    successModalToggle: false
  }
}) 
</script>
>>>>>>> 9b9118c2679bdee0392484cf5274e13483e37446
@endsection